<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>项目建设</title>
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../../css/sanziguanli/xiangmujianshe.css">
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script src="../../mock/mock/mock-min.js"></script>
    <script src="../../js/jquery-3.4.1.js"></script>
    <script src="../../mock/mock1.js"></script>
    <style>
        .layui-form-selected dl {
            text-align: left;
        }
    </style>
</head>

<body>
    <div class="layui-contaniner" style="padding: 15px; background-color: #f2f2f2;">
        <div class="layui-head">
            <div class="first second">

                <div class="layui-row">
                    <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 layui-col-lg1 anniu">
                        <button class="layui-btn layui-btn-normal tianjia" lay-event="edit" id="btn1">
                                <i class="layui-icon layui-icon-addition"></i><span>添加</span>
                            </button>
                    </div>
                    <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 layui-col-lg1 anniu">
                        <button class="layui-btn layui-btn-danger shanchucheck" lay-event="del" id="btn2">
                                <i class="layui-icon layui-icon-delete"></i><span>删除</span>
                            </button>
                    </div>
                    <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 layui-col-lg1 anniu">
                        <button class="layui-btn layui-btn-normal" layui-event="" id="btn5" onclick=" daochuxuanzhehang()">
                                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-bar-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M8 10a.5.5 0 0 0 .5-.5V3.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 3.707V9.5a.5.5 0 0 0 .5.5zm-7 2.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5z"/>
                                </svg>
                                <span>导出选中行</span>	
                            </button>
                    </div>
                    <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 layui-col-lg1 anniu">
                        <button class="layui-btn layui-btn-normal" layui-event="" id="btn6" style="display: none;">
                                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-bar-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M8 10a.5.5 0 0 0 .5-.5V3.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 3.707V9.5a.5.5 0 0 0 .5.5zm-7 2.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5z"/>
                                </svg>
                                <span>导出Excel</span>
                            </button>
                    </div>

                    <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 layui-col-lg2">
                        &nbsp;
                    </div>

                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6">
                        <form class="layui-form" lay-filter="saixuan">
                            <div class="layui-row">
                                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 layui-col-lg3">
                                    <select id="qu1" name="areaId" lay-verify="required" lay-filter="qu1">
                                    <option value="">地区筛选(区/县)</option>
                                </select>
                                </div>
                                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 layui-col-lg3">
                                    <select id="zhen1" name="townid" lay-verify="required" name="townId" lay-filter="zhen1">
                                        <option value="">地区筛选(镇/街道)</option>
                                    </select>
                                </div>

                                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 layui-col-lg3">
                                    <select name="villageId" lay-verify="required" id="cun1" name="villageId">
                                        <option value="">地区筛选(村)</option>
                                    </select>
                                </div>

                                <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 layui-col-lg2 ">
                                    <input type="text" name="keyWords" lay-verify="required" placeholder="查询内容或字段" autocomplete="off" class="layui-input chaxun">
                                </div>

                                <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 layui-col-lg1 anniu1">
                                    <button type="button" class="layui-btn layui-btn-normal cha" onclick="chaxun()" style="margin-left:50px;">
                                        <i class="layui-icon layui-icon-search"></i>&nbsp;&nbsp;查询
                                        </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-footer">
                <table id="demo" lay-filter="test"></table>
                <button type="button" class="layui-btn" id="shangchuanwenjian">
                    上传<i class="layui-icon">&#xe67c;</i>
                </button>
                <a type="button" class="layui-btn" href="http://47.94.152.81:8082/Excel/projectTemplate">
                    <i class="layui-icon layui-icon-download-circle"></i>&nbsp;&nbsp;下载模板
                </a>
            </div>
        </div>
    </div>

    <script type="text/html" id="barDemo">
        <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="xiangqing">详情</button>
        <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</button>
    </script>

    <script>
        // 图片上传的文件流
        var tupian = []
            // 图片上传返回的url
        var tupian1 = []
        var upload
        var form
        var option
        var table
        layui.use(['table', 'form', 'upload'], function() {
            table = layui.table;
            form = layui.form;
            upload = layui.upload;
            shangchuanxinxi()
            option = {
                id: 'idTest',
                url: url + 'projectconstruction/query',
                elem: '#demo',
                method: "post",
                size: 'lg',
                limits: [10, 20, 50, 100, 200, 500],
                // width: 1300,
                page: true,
                //toolbar: true,
                skin: 'line',
                text: {
                    none: '暂无数据' //默认：无数据。
                },
                headers: {
                    token: localStorage.getItem('token')
                },
                request: {
                    pageName: "currentPage", //页码的参数名称，默认：page
                    limitName: "size", //每页数据量的参数名，默认：limit
                },
                where: {
                    townId: "",
                    villageid: "",
                },
                parseData: function(res) {
                    if (res.code == "401") {
                        layer.msg('1')
                        window.parent.window.location.href = "../login/index.html"
                    }

                    //res 即为原始返回的数据
                    return {
                        code: 0, //解析接口状态
                        msg: res.msg, //解析提示文本
                        count: res.data.count, //解析数据长度
                        data: setdata(res.data.ProjectConstructionList), //解析数据列表
                    }
                },
                cols: [
                    [{
                        field: 'checkbox',
                        type: 'checkbox',
                        width: 100,
                        align: 'center'
                    }, {
                        field: 'number',
                        title: '序号',
                        width: 100,
                        align: 'center',
                        type: 'numbers'
                    }, {
                        field: 'villagename',
                        title: '所属村',
                        width: 150,
                        align: 'center'
                    }, {
                        field: 'name',
                        title: '项目名称',
                        width: 150,
                        sort: true,
                        align: 'center'
                    }, {
                        field: 'implementer',
                        title: '实施方',
                        width: 150,
                        align: 'center',
                    }, {
                        field: 'acceptor',
                        title: '验收方',
                        width: 150,
                        align: 'center',
                    }, {
                        field: 'supervisor',
                        title: '监理方',
                        width: 150,
                        align: 'center'
                    }, {
                        field: 'operation',
                        title: '操作',
                        align: 'center',
                        toolbar: '#barDemo'
                    }]
                ]
            };
            tableIns = table.render(option);
            areas.forEach(item => {
                    // console.log($('#zhen1')[0].innerHTML)
                    $('#qu1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                })
                // 镇生成
            towns.forEach(item => {
                    // console.log($('#zhen1')[0].innerHTML)
                    $('#zhen1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                })
                //镇生成
            form.on('select(qu1)', function(data) {
                $('#zhen1').empty()
                $('#zhen1')[0].innerHTML += ` <option value="">地区筛选(镇/街道)</option>`
                villages.forEach(item => {
                    if (item.areaId == data.value) {
                        $('#zhen1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                    }
                })
                form.render('select', "saixuan")
            });
            // 村生成
            form.on('select(zhen1)', function(data) {
                $('#cun1').empty()
                $('#cun1')[0].innerHTML += ` <option value="">地区筛选(村)</option>`
                villages.forEach(item => {
                    if (item.townId == data.value) {
                        $('#cun1')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                    }
                })
                form.render('select', "saixuan")
            });
            form.render('select', "saixuan")

            table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                console.log(obj)
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                //删除行
                if (layEvent === 'del') {
                    layer.open({
                        title: '温馨提示',
                        type: '0',
                        area: ['400px', '160px'],
                        offset: 'auto',
                        content: '<div><p>你确定要删除选中项吗</p></div>',
                        btn: ['取消', '确认'],
                        btn2: function() {
                            var data = {};
                            data.IdList = [];
                            data.IdList.push(obj.data.id)
                            traditional: true, //防止深度序列化
                                console.log(data)
                            $.ajax({
                                url: url + "projectconstruction/del",
                                method: "post",
                                traditional: true, //防止深度序列化
                                data: data,
                                success: function(data) {
                                    console.log(data);
                                    if (data.code === 200) {

                                        table.reload("idTest", option);
                                        layer.msg('删除成功!')
                                    } else {
                                        layer.msg('删除失败!')
                                    }
                                },
                                error: function(err) {
                                    layer.msg('删除失败!')
                                },
                            });
                            layer.closeAll();
                        },
                        btn1: function() {
                            layer.msg('已取消操作')
                        },
                    });
                }

                //详情    		
                if (layEvent === 'xiangqing') {
                    layer.open({
                        type: 1,
                        title: "详细信息",
                        offset: "auto",
                        content: `
                        <div class="layui-row">
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">项目名称</label>
                        <label class="layui-form-label xiangqingcontent">` + obj.data.name + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">项目编号</label>
                        <label class="layui-form-label xiangqingcontent number">` + obj.data.number + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">所属村</label>
                        <label class="layui-form-label xiangqingcontent">` + obj.data.villagename + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">所属组</label>
                        <label class="layui-form-label xiangqingcontent zu">` + obj.data.groupId + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">所属街道</label>
                        <label class="layui-form-label xiangqingcontent">` + gettown(obj.data.townId).name + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">是否招投标</label>
                        <label class="layui-form-label xiangqingcontent bidding">` + obj.data.bidding + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">是否立项</label>
                        <label class="layui-form-label xiangqingcontent projected">` + obj.data.projected + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">是否实施</label>
                        <label class="layui-form-label xiangqingcontent implement">` + obj.data.implement + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">实施方</label>
                        <label class="layui-form-label xiangqingcontent shishi">` + obj.data.implementer + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">验收方</label>
                        <label class="layui-form-label xiangqingcontent yan">` + obj.data.acceptor + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">监理方</label>
                        <label class="layui-form-label xiangqingcontent jian">` + obj.data.supervisor + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">工程款支付情况</label>
                        <label class="layui-form-label xiangqingcontent qingkuang">` + obj.data.deliverySituation + `</label>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 hanggao">
                        <label class="layui-form-label xiangqingtitle">备注</label>
                        <label class="layui-form-label xiangqingcontent zhu">` + obj.data.remarks + `</label>
                    </div>
                    </div>
                        `,
                        area: ["1000px", "700px"],
                        btn: ['确定', ], //可以无限个按钮
                        btnAlign: "c",
                        btn1: function() {
                            layer.closeAll();
                        },
                        success: function() {
                            if (obj.data.remarks == null) {
                                $(".zhu")[0].innerHTML = ""
                            }
                            if (obj.data.supervisor == null) {
                                $(".jian")[0].innerHTML = ""
                            }
                            if (obj.data.acceptor == null) {
                                $(".yan")[0].innerHTML = ""
                            }
                            if (obj.data.implementer == null) {
                                $(".shishi")[0].innerHTML = ""
                            }
                            if (obj.data.deliverySituation == null) {
                                $(".qingkuang")[0].innerHTML = ""
                            }
                            if (obj.data.groupId == null) {
                                $(".zu")[0].innerHTML = ""
                            } else {
                                $(".zu")[0].innerHTML = getgroup(obj.data.groupId).name
                            }
                            if (obj.data.bidding == 0) {
                                $(".bidding")[0].innerHTML = "招投标"
                            } else {
                                $(".bidding")[0].innerHTML = "无招投标"
                            }
                            if (obj.data.projected == 0) {
                                $(".projected")[0].innerHTML = "立项"
                            } else {
                                $(".projected")[0].innerHTML = "无立项"
                            }
                            if (obj.data.implement == 0) {
                                $(".implement")[0].innerHTML = "已实施"
                            } else {
                                $(".implement")[0].innerHTML = "无实施"
                            }
                            if (obj.data.number == null || obj.data.number == 'null') {
                                $(".number")[0].innerHTML = ""
                            }
                        },
                    });
                };

                //编辑行内容
                if (layEvent === 'edit') {
                    layer.open({
                        type: 1,
                        title: "项目建设编辑",
                        content: `
                        <div class="juzhong">
        <form class="layui-form xingzhengcunxinxitianjia" id="bianji" lay-filter="bianji" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">所属区</label>
            <div class="layui-input-block">
                <select id="qu" name="areaId" lay-verify="required" lay-filter="qu">
                  <option value="">请选择所属区</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属镇</label>
            <div class="layui-input-block">
                <select id="zhen" name="townId" lay-verify="required" lay-filter="zhen">
                    <option value="">请选择所属镇</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属村</label>
            <div class="layui-input-block">
                <select id="cun" name="villageId" lay-verify="required" lay-filter="cun">
                    <option value="">请选择所属村</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属组</label>
            <div class="layui-input-block">
                <select id="zu" name="groupId" lay-verify="required" lay-filter="zu">
                    <option value="">请选择所属组</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">项目编号</label>
            <div class="layui-input-block">
                <input type="text" value="` + obj.data.number + `" lay-filter="zhenjiedaoxinxi" name="number" required lay-verify="required" placeholder="请输入项目编号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">项目名称</label>
            <div class="layui-input-block">
                <input type="text"  value="` + obj.data.name + `"  lay-filter="zhenjiedaoxinxi" name="name" required lay-verify="required" placeholder="请输入项目名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否招投标</label>
            <div class="layui-input-block">
                <select id="bidding" name="bidding" lay-verify="required">
                    <option id="" value="">请选择是否招投标</option>
                        <option value="0">招投标</option>
                        <option value="1">无招投标</option>
                </select>
            </div>
        </div>
          <div class="layui-form-item">
            <label class="layui-form-label">是否立项</label>
            <div class="layui-input-block">
                <select id="projected" name="projected" lay-verify="required">
                    <option id="" value="">请选择是否立项</option>
                        <option value="0">立项</option>
                        <option value="1">无立项</option>
                </select>
            </div>
        </div>
          <div class="layui-form-item">
            <label class="layui-form-label">是否实施</label>
            <div class="layui-input-block">
                <select id="implement" name="implement" lay-verify="required">
                    <option id="" value="">请选择是否实施</option>
                        <option value="0">已实施</option>
                        <option value="1">无实施</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">实施方</label>
            <div class="layui-input-block">
                <textarea name="implementer" id="implementer"   placeholder="请输入实施方" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验收方</label>
            <div class="layui-input-block">
                <textarea name="acceptor" id="acceptor"   placeholder="请输入验收方" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">监理方</label>
            <div class="layui-input-block">
                <textarea name="supervisor" id="supervisor"   placeholder="请输入监理方" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">工程款支付情况</label>
            <div class="layui-input-block">
                <textarea name="deliverySituation" id="deliverySituation"   placeholder="请输入工程款支付情况" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remarks" id="beizhu" placeholder="请输入相关备注信息" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-block">
                <div class="layui-upload" name="">
                    <div class="layui-upload" name="">
                        <button type="button" class="layui-btn" id="shangchuantupian">图片选择</button>
                        <button type="button" class="layui-btn" id="shangchuananniu">图片上传</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list" id="tupianyuelan"></div>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal tijiao" id="tianjia">保存编辑</button>
                <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
            </div>
        </div>
    </form>
</div>
`,
                        offset: "auto",
                        area: ["700px", "700px"],
                        success: function() {
                            tupian = []
                            tupian1 = []
                            if (obj.data.relatedDocuments !== null) {
                                var cunmaotu0 = JSON.parse(obj.data.relatedDocuments)
                                tupian1 = cunmaotu0
                                console.log(tupian1)
                                if (cunmaotu0.length !== 0) {
                                    cunmaotu0.forEach((item, index) => {
                                        $('#tupianyuelan').append(`<img onclick=quchutupian("` + item.url + `",this) src=" ` + item.url + `" class="layui-upload-img">`)
                                    })
                                }
                            }
                            areas.forEach(item => {
                                $('#qu')[0].innerHTML += `<option value="` + item.id + `">` + item.name + `</option>`
                            })
                            towns.forEach(item => {
                                $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                            })
                            villages.forEach(item => {
                                    $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                })
                                // 监听每一个选择框的选择事件
                                // 1.区选择
                            var bianjiqu = obj.data.areaId
                            form.on('select(qu)', function(data) {
                                bianjiqu = data.value
                                $('#zhen').empty()
                                $('#zhen')[0].innerHTML += ` <option value="">请选择所属镇</option>`
                                towns.forEach(item => {
                                    if (item.areaId == data.value) {
                                        $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                    }
                                })
                                form.render('select', "bianji")
                            });
                            // 2.镇监听
                            form.on('select(zhen)', function(data) {
                                $('#cun').empty()
                                $('#cun')[0].innerHTML += ` <option value="">请选择所属村</option>`
                                villages.forEach(item => {
                                    if (item.townId == data.value) {
                                        $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                    }
                                })
                                form.render('select', "bianji")
                            });
                            // 村监听 
                            form.on('select(cun)', function(data) {
                                $('#zu').empty()
                                $('#zu')[0].innerHTML += ` <option value="">请选择所属组</option>`

                                if (data.value != "") {
                                    // 为组进行赋值
                                    var data1 = {}
                                    data1.areaId = bianjiqu
                                    data1.townId = getvillage(data.value).townId
                                    data1.villageId = data.value
                                    console.log(data1)
                                    $.ajax({
                                        url: url + "group/querygroup",
                                        method: "get",
                                        data: data1,
                                        success: function(data) {
                                            console.log(data)
                                            data.data.group.forEach(item => {
                                                $('#zu')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                            })
                                            form.render('select', "bianji")
                                        },
                                        error: function(err) {
                                            console.log(err)
                                        }
                                    })
                                }
                                form.render('select', "bianji")
                            })
                            $('#qu').val(obj.data.areaId);
                            $('#zhen').val(obj.data.townId);
                            $('#cun').val(obj.data.villageId);
                            $('#implementer').val(obj.data.implementer);
                            $('#acceptor').val(obj.data.acceptor);
                            $('#supervisor').val(obj.data.supervisor);
                            $('#deliverySituation').val(obj.data.deliverySituation);
                            $('#projected').val(obj.data.projected);
                            $('#bidding').val(obj.data.bidding);
                            $('#implement').val(obj.data.implement);
                            $('#beizhu').val(obj.data.remarks)
                            form.render('select', "bianji");

                            // 组赋值
                            var datatype = {}
                            datatype.villageId = obj.data.villageId
                            datatype.townId = obj.data.townId
                            datatype.areaId = bianjiqu
                            $.ajax({
                                url: url + "group/querygroup",
                                method: "get",
                                data: datatype,
                                success: function(data) {
                                    console.log(data)
                                    data.data.group.forEach(item => {
                                        $('#zu')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                    })
                                    $('#zu').val(obj.data.groupId);
                                    form.render('select', "bianji")
                                },
                                error: function(err) {
                                    console.log(err)
                                }

                            })
                            form.render('select', "bianji")

                            // 图片上传
                            upload.render({
                                elem: '#shangchuantupian',
                                url: url + 'upload',
                                name: "files",
                                data: {
                                    folderName: " ProjectConstruction"
                                },
                                headers: {
                                    token: localStorage.getItem('token')
                                },
                                field: "multipartFiles",
                                auto: false,
                                bindAction: "#shangchuananniu",
                                multiple: true,
                                before: function(obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                                    loading2 = layer.load(); //换了种风格
                                },
                                allDone: function(obj) { //当文件全部被提交后，才触发
                                    layer.close(loading2);
                                    layer.msg('上传成功')
                                },
                                choose: function(obj) {
                                    var files = obj.pushFile();
                                    console.log(files)
                                    console.log(obj)
                                        //预读本地文件示例，不支持ie8
                                    obj.preview(function(index, file, result) {
                                        tupian.push(file)
                                        $('#tupianyuelan').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                                    });
                                },
                                done: function(res, index, upload) {
                                    res.data = JSON.parse(res.data)
                                    console.log(res)
                                    if (res.code === 200) {
                                        res.data.forEach(item => {
                                            tupian1.push({
                                                name: item.name,
                                                url: item.url
                                            })
                                        })
                                    }
                                },
                                error: function(index, upload) {
                                    layer.msg("上传失败")
                                        //当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传
                                },

                            })
                            form.render('select', "bianji")

                            $("#tianjia").click(function() {
                                var data1 = form.val("bianji");
                                data1.id = obj.data.id;
                                if (tupian1.length !== 0) {
                                    data1.relatedDocuments = JSON.stringify(tupian1)
                                } else {
                                    data1.relatedDocuments = '[]'
                                }

                                console.log(data1)

                                if (data.address !== "" && data.townId !== "" && data.footprint !== "" && data.introduction !== "" && data.name !== "" && data.population !== "") {

                                    console.log(tupian1)
                                    console.log(data)
                                    console.log(data1);
                                    $.ajax({
                                        url: url + "projectconstruction/update",
                                        method: "post",
                                        data: data1,
                                        success: function(data) {
                                            console.log(data)
                                            if (data.code === 200) {
                                                layer.closeAll();
                                                table.reload("idTest", option);
                                                layer.msg('修改成功!')
                                            } else {
                                                layer.msg(data.msg)
                                            }
                                            tupian = []
                                        },
                                        error: function(err) {
                                            layer.msg('修改失败')
                                        },
                                    });
                                } else {
                                    layer.mag('请将信息填写完整')
                                }
                            });
                        },
                        // btn: ['保存编辑', ], //可以无限个按钮
                        btnAlign: "c",
                    });
                }
            });
        });
    </script>

    <script>
        //添加表格内行内容
        $(document).ready(function() {
            $('.tianjia').click(function() {
                layer.open({
                    type: '1',
                    title: "添加",
                    content: `
            <div class="juzhong">
                <form class="layui-form xingzhengcunxinxitianjia" id="bianji" lay-filter="tianjia" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">所属区</label>
                        <div class="layui-input-block">
                            <select id="qu" name="areaId" lay-verify="required" lay-filter="qu">
                                <option value="">请选择资源所属村</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">所属镇</label>
                        <div class="layui-input-block">
                            <select id="zhen" name="townId" lay-verify="required" lay-filter="zhen">
                                <option value="">请选择所属镇</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">所属村</label>
                        <div class="layui-input-block">
                            <select id="cun" name="villageId" lay-verify="required" lay-filter="cun">
                                <option value="">请选择所属村</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">所属组</label>
                        <div class="layui-input-block">
                            <select id="zu" name="groupId" lay-verify="required" lay-filter="zu">
                                <option value="">请选择所属组</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">项目编号</label>
                        <div class="layui-input-block">
                            <input type="text" lay-filter="bianhao" name="number" required lay-verify="required" placeholder="请输入项目编号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">项目名称</label>
                        <div class="layui-input-block">
                            <input type="text" lay-filter="mingcheng" name="name" required lay-verify="required" placeholder="请输入项目名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否招投标</label>
                        <div class="layui-input-block">
                            <select name="bidding" lay-verify="required" placeholder="请选择是否招投标">
                                    <option value="0">招投标</option>
                                    <option value="1">无招投标</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否立项</label>
                        <div class="layui-input-block">
                            <select name="projected" lay-verify="required" placeholder="请选择是否立项">
                                    <option value="0">立项</option>
                                    <option value="1">无立项</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否实施</label>
                        <div class="layui-input-block">
                            <select name="implement" lay-verify="required" placeholder="请选择是否实施">
                                    <option value="0">已实施</option>
                                    <option value="1">无实施</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">实施方</label>
                        <div class="layui-input-block">
                            <textarea name="implementer" id="shishifang"   placeholder="请输入实施方" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">验收方</label>
                        <div class="layui-input-block">
                            <textarea name="acceptor" id="yanshoufang"   placeholder="请输入验收方" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">监理方</label>
                        <div class="layui-input-block">
                            <textarea name="supervisor" id="jianlifang"   placeholder="请输入监理方" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">工程款支付情况</label>
                        <div class="layui-input-block">
                            <textarea name="deliverySituation" id="gongchengkuanzhifu"   placeholder="请输入工程款支付情况" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea name="remarks" id="beizhu" placeholder="请输入相关备注信息" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">图片</label>
                        <div class="layui-input-block">
                            <div class="layui-upload" name="">
                                <div class="layui-upload" name="image">
                                    <button type="button" class="layui-btn" id="shangchuantupian">图片选择</button>
                                    <button type="button" class="layui-btn" id="shangchuananniu">图片上传</button>
                                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                        预览图：
                                        <div class="layui-upload-list" id="tupianyuelan"></div>
                                    </blockquote>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-normal bianji" id="tianjia">添加</button>
                            <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
                        </div>
                    </div>
                </form>
            </div>
`,
                    offset: "auto",
                    area: ["700px", "700px"],
                    success: function() {
                        areas.forEach(item => {
                            $('#qu')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                        })

                        towns.forEach(item => {
                            $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                        })

                        villages.forEach(item => {
                            $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                        })


                        // 监听每一个选择框的选择事件
                        var tianjiaqu = ""
                            // 1.区选择
                        form.on('select(qu)', function(data) {
                            tianjiaqu = data.value
                            $('#zhen').empty()
                            $('#zhen')[0].innerHTML += ` <option value="">请选择所属镇</option>`
                            towns.forEach(item => {
                                if (item.areaId == data.value) {
                                    $('#zhen')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                }
                            })
                            form.render('select', "tianjia")
                        });
                        // 2.镇监听
                        form.on('select(zhen)', function(data) {
                            $('#cun').empty()
                            $('#cun')[0].innerHTML += ` <option value="">请选择所属村</option>`
                            villages.forEach(item => {
                                if (item.townId == data.value) {
                                    $('#cun')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                }
                            })
                            form.render('select', "tianjia")
                        });

                        // 村监听
                        form.on('select(cun)', function(data) {
                            console.log(data.value)
                            $('#zu').empty()
                            $('#zu')[0].innerHTML += ` <option value="">请选择所属组</option>`

                            if (data.value != "") {
                                var data1 = {}
                                console.log(getvillage(data.value))
                                data1.areaId = tianjiaqu
                                data1.townId = getvillage(data.value).townId
                                data1.villageId = data.value
                                console.log(data1)
                                $.ajax({
                                    url: url + "group/querygroup",
                                    method: "get",
                                    data: data1,
                                    success: function(data) {
                                        console.log(data)
                                        data.data.group.forEach(item => {
                                            $('#zu')[0].innerHTML += ` <option value="` + item.id + `">` + item.name + `</option>`
                                        })
                                        form.render('select', "tianjia")
                                    },
                                    error: function(err) {
                                        console.log(err)
                                    }
                                })
                            }
                            form.render('select', "tianjia")
                        })
                        form.render('select', "tianjia");

                        $("#tianjia").click(function() {
                            var data1 = form.val("tianjia");
                            if (tupian1.length !== 0) {
                                data1.relatedDocuments = JSON.stringify(tupian1)
                            } else {
                                data1.relatedDocuments = "[]"
                            }

                            data1.id = 0;
                            console.log(data1);

                            $.ajax({
                                url: url + "projectconstruction/add",
                                method: "post",
                                data: data1,
                                success: function(data) {
                                    console.log(data)
                                    if (data.code === 200) {
                                        layer.closeAll();
                                        table.reload("idTest", option);
                                        layer.msg('添加成功!')
                                    } else {
                                        layer.msg(data.msg)
                                    }
                                    tupian = []
                                    tupian1 = []
                                },
                                error: function(err) {
                                    layer.msg('请将信息填写完整')
                                },
                            });
                        });

                        // 上传图片的
                        upload.render({
                            elem: '#shangchuantupian',
                            url: url + 'upload',
                            name: "files",
                            data: {
                                folderName: " ProjectConstruction"
                            },
                            headers: {
                                token: localStorage.getItem('token')
                            },
                            field: "multipartFiles",
                            auto: false,
                            bindAction: "#shangchuananniu",
                            multiple: true,
                            before: function(obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                                loading2 = layer.load(); //换了种风格
                            },
                            allDone: function(obj) { //当文件全部被提交后，才触发
                                layer.close(loading2);
                                layer.msg('上传成功')
                            },
                            choose: function(obj) {
                                var files = obj.pushFile();
                                console.log(files)
                                console.log(obj)
                                    //预读本地文件示例，不支持ie8
                                obj.preview(function(index, file, result) {
                                    tupian.push(file)
                                    $('#tupianyuelan').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                                });
                            },
                            done: function(res, index, upload) {
                                res.data = JSON.parse(res.data)
                                console.log(res)
                                if (res.code === 200) {
                                    res.data.forEach(item => {
                                        tupian1.push({
                                            name: item.name,
                                            url: item.url
                                        })
                                    })
                                }
                            },
                            error: function(index, upload) {
                                layer.msg("上传失败")
                                    //当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传
                            },

                        })

                    },
                    // btn: ['保存编辑', ], //可以无限个按钮
                    btnAlign: "c",
                    btn1: function() {
                        layer.closeAll();
                    }
                });
            })
        });
    </script>

    <script>
        $(document).ready(function() {
            $('.shanchucheck').click(function() {
                var checkStatus = table.checkStatus("idTest"); //idTest 即为基础参数 id 对应的值
                console.log(checkStatus.data); //获取选中行的数据
                var data = {}
                data.IdList = [];
                checkStatus.data.forEach((item) => {
                    data.IdList.push(item.id);
                });
                console.log(data)
                $.ajax({
                    url: url + "projectconstruction/del",
                    method: "post",
                    data: data,
                    traditional: true, //防止深度序列化,
                    // type:"json",
                    success: function(data) {
                        if (data.code === 200) {
                            layer.closeAll();
                            table.reload("idTest", option);
                            layer.msg("删除成功")
                        } else {
                            layer.msg('删除失败')
                        }
                        console.log(data);

                    },
                    error: function(err) {},
                });
            })
        })
    </script>

    <script>
        //到处选中行
        function daochuxuanzhehang() {
            var checkStatus = table.checkStatus('idTest'); //idTest 即为基础参数 id 对应的值
            console.log(checkStatus.data) //获取选中行的数据
            table.exportFile('idTest', checkStatus.data, 'xls');
        }
        // 去除图片
        function quchutupian(url, e) {
            console.log(url)
            tupian1.forEach((item, index) => {
                if (item.url == url) {
                    tupian1.splice(index, 1);
                }
            })
            $('#tupianyuelan')[0].removeChild(e)
            console.log(tupian1)
        }
    </script>
    <script>
        //导入数据
        function setdata(data) {
            console.log(data)
            data.forEach(item => {
                item.villagename = getvillage(item.villageId).name
                item.projectname = item.name
                item.projectperson = item.name
                item.projectpeople = item.name
                item.project = item.name
            })
            console.log(data)
            return data
        }

        //设置查询刷新列表
        function chaxun() {
            var data = form.val("saixuan");
            console.log(data)
            option.where.areaId = data.areaId
            option.where.townid = data.townid
            option.where.villageId = data.villageId
            option.where.name = data.keyWords
            console.log(option.where)
            table.reload("idTest", option);
            option.where.townid = ""
            option.where.villageId = ''
            option.where.name = ""
        }

        // 上传信息
        function shangchuanxinxi() {
            // 文件
            upload.render({
                elem: '#shangchuanwenjian',
                url: '',
                multiple: false,
                method: 'post',
                accept: 'file',
                auto: false,
                bindAction: "#12343213123",
                headers: {
                    token: localStorage.getItem('token')
                },
                before: function(obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    loading2 = layer.load(); //换了种风格
                },
                choose: function(obj) {
                    var formData = new FormData();
                    obj.preview(function(index, file, result) {
                        formData.append('file', file)
                        console.log(formData.get('file'))
                        $.ajax({
                            url: url + 'Excel/projectUpload',
                            method: "post",
                            data: formData,
                            cache: false,
                            contentType: false,
                            processData: false,
                            success: function(data) {
                                if (data.code === 0) {
                                    layer.msg(data.msg)
                                    table.reload("idTest", option);
                                } else {
                                    layer.msg(data.msg)
                                }
                            },
                            error: function(err) {
                                console.log(err)
                            }
                        })
                    });

                },
            })
        }
    </script>
</body>

</html>